<template>
	<section class="scholl border-box">
		<div>			
			<ul class="bg-white order-list pb30rem"
				v-infinite-scroll="loadData" 
				infinite-scroll-disabled="loading" 
				infinite-scroll-distance="10"
				v-if="flag"
			>				
				<li class="body-item" v-for="item in order_list">
					<div class="layout pl30rem pr30rem pt20rem pb20rem">
						<span>{{item.shop_name}}</span>
						<span class="red">{{item.refund_tips}}</span>
					</div>
					<div class="body layout pl30rem pr30rem pt20rem pb20rem"
						v-for="item2 in item.content"
					>
						<img :src="img_url+item2.goods_picture">
						<div class="goods-info">
							<div>
								<div class="goods-text">
									<p class="bold fs28rem ">
										{{item2.goods_name}}
									</p>
									<p class="c333 fs14rem align-right">
										×{{item2.num}}
									</p>									
								</div>								
							</div>
							<div class="align-right fs24rem">
								<router-link 
									:to="'afterSalesOrderDetail?order_id='+item.order_id+'&shop_id='+item.shop_id+'&tips='+item.refund_tips" 
									class="pt10rem pr15rem pb10rem pl10rem button fs24rem assess-btn"
								>
									查看详情
								</router-link>								
							</div>
						</div>
					</div>
				</li>										
			</ul>		
			<template v-else>
				<default :imgUrl="img" explain='暂无记录'></default>
			</template>									
		</div>			
	</section>
</template>

<script>
	import { InfiniteScroll }  from 'mint-ui';	
	import { afterSalesOrder } from '@/api/ordering';
	import Default from "@/components/Default";
	import $toast from '@/utils/toast';
	export default
	{
		components: 
		{
			Default
		},
		directives:
		{
			InfiniteScroll
		},
		data() 
		{
			return{
				order_list: [],
				img_url   : process.env.IMG_URL,
				loading   : false,	
				img       : require('../../../assets/icon-goods2.png'),
				flag      : true,			
				page      : 1
			}
		},		
		methods:
		{
			loadData()
			{
				// 防止多次加载
				this.loading = true;
				var params = {
					uid  : localStorage.getItem('uid'),
					page : this.page++,
					item : 10
				};
				afterSalesOrder(params).then( res=> {
					if( res.data.length > 0){
						this.order_list = this.order_list.concat(res.data);
						this.loading    = false;
					}
					else if (params.page > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.item)
					{
						this.loading = true;
					}					
				});
			}
		},
		created()
		{
			this.loadData();
		}
	}
	
</script>

<style lang="less">
	.border-box{
		box-sizing: border-box;		
		.order-list{		
				
			.body-item{
				border-bottom: 1px solid #eee;
				.body{
					img{
						width: 147/28rem;
						height: 147/28rem;
					}
					.goods-info{
						width: 510/28rem;
						.goods-text{
							height: 90/28rem;
						}
						.layout{
							align-items: flex-start;
						}
					}
				}
			}				
			.button{
				border-radius: 4px;
			}
			.delete-btn{
				color: #333333;
				border: 1px solid #333333;
			}
			.assess-btn{
				color: #ff0036;
				border: 1px solid #ff0036;
			}
			
		}
		
	}
	.border-box * {
		box-sizing: border-box;
	}
	
	
</style>

